<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Dashboard">
		<meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<title>Dashio - Bootstrap Admin Template</title>
		<!-- Favicons -->
		<link rel="shortcut icon" href="#" />
		<!-- Bootstrap core CSS -->
		<link href="${pageContext.request.contextPath }/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!--external css-->
		<link href="${pageContext.request.contextPath }/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/zabuto_calendar.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/lib/gritter/css/jquery.gritter.css" />
		<!-- Custom styles for this template -->
		<link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath }/css/style-responsive.css" rel="stylesheet">
		<script src="${pageContext.request.contextPath }/lib/chart-master/Chart.js"></script>

		<!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->
	</head>

	<body>
		<section id="container">
			<!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
			<!--header start-->
			<header class="header black-bg">
				<div class="sidebar-toggle-box">
					<div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
				</div>
				<!--logo start-->
				<a href="index.jsp" class="logo"><b>BES<span>Manage</span></b></a>
				<!--logo end-->
				
				<div class="top-menu">
					<ul class="nav pull-right top-menu">
						<li>
							<a class="logout" href="${pageContext.request.contextPath }/UserController?op=exit">退出登录</a>
						</li>
					</ul>
				</div>
			</header>
			<!--header end-->
			<!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
			<!--sidebar start-->
			<aside>
				<div id="sidebar" class="nav-collapse ">
					<!-- sidebar menu start-->
					<ul class="sidebar-menu" id="nav-accordion">
						<p class="centered"><a href="index.jsp">
				        	<!--管理员头像-->
				          <!-- 默认头像 -->
							<c:if test="${sessionScope.backUser.u_img ==null}">
								<img  src="${pageContext.request.contextPath }/images/ui-sam.jpg" class="img-circle" width="80" />
							</c:if>
							<!-- 自定义头像 -->
							<c:if test="${sessionScope.backUser.u_img !=null}">
								<img  src="${pageContext.request.contextPath }/DownloadServlet?fileName=${sessionScope.backUser.u_img}"  class="img-circle" width="80" />
							</c:if>
				          </a></p>
				          <!--管理员名-->
				          <h5 class="centered">${sessionScope.backUser.u_name}</h5>
						<li class="mt">
							<a href="${pageContext.request.contextPath }/back/index.jsp">
								<i class="fa fa-dashboard"></i>
								<span>公司信息</span>
							</a>
						</li>
						<li class="sub-menu">
							<a class="active" href="javascript:;">
								<i class="fa fa-desktop"></i>
								<span>用户管理</span>
							</a>
							<ul class="sub">
								<li class="active">
									<a href="${pageContext.request.contextPath }/back/user-information.jsp">用户信息</a>
								</li>
								<li>
									<a href="${pageContext.request.contextPath }/back/adduser.jsp">添加用户</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="${pageContext.request.contextPath }/back/javascript:;">
								<i class="fa fa-tasks"></i>
								<span>车次管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="${pageContext.request.contextPath }/back/bus-information.jsp">车次信息</a>
								</li>
								<li>
									<a href="${pageContext.request.contextPath }/back/moment-information.jsp">时刻信息</a>
								</li>
								<li>
									<a href="${pageContext.request.contextPath }/back/addmoment.jsp">添加时刻表</a>
								</li>
								<li>
									<a href="${pageContext.request.contextPath }/back/addsite.jsp">添加车次</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="${pageContext.request.contextPath }/back/javascript:;">
								<i class="fa fa-th"></i>
								<span>站点管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="${pageContext.request.contextPath }/back/bussite-information.jsp">站点信息</a>
								</li>
								<li>
									<a href="${pageContext.request.contextPath }/back/addbussite.jsp">添加站点</a>
								</li>
								<li><a href="${pageContext.request.contextPath }/back/addbusSites.jsp">新增站点</a></li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="${pageContext.request.contextPath }/back/javascript:;">
								<i class="fa fa-comments-o"></i>
								<span>公告栏管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="${pageContext.request.contextPath }/back/announcement.jsp">公告栏信息</a>
								</li>
							</ul>
						</li>
						<li>
							 <a href="${pageContext.request.contextPath }/back/baidu_maps.jsp">
					              <i class="fa fa-map-marker"></i>
					              <span>百度地图</span>
					              </a>
						</li>
					</ul>
					<!-- sidebar menu end-->
				</div>
				<!--sidebar start-->
			</aside>
			<!--sidebar end-->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!-- row -->
        <div class="row mt">
          <div class="col-md-12">
            <div class="content-panel">
              <table class="table table-striped table-advance table-hover">
              <div style="float: left; width: 100px">
                <h4 style="display:line-block;"><i class="fa fa-angle-right"></i> 用户列表</h4></div>
                <div style="float: right;">
                <form action="#" class="pull-right position" >
	              <div style="float:left; ">
	                <input type="text" placeholder="输入姓名关键字查询" id="keyWord" name="titleLike"
							value="${empty requestScope.titleLike?'':requestScope.titleLike}" class="form-control search-btn ">
				  </div>
				  <div style="float:left; margin-top: 2px;">
	                <input  type="button" id="searchBtn" name="searchBtn" class="form-control" value="搜索"/>	
	              </div>
	              <div style="float:left; margin-top: 2px; ">			
					<input  type="button" id="clearBtn" class="form-control" value="清除"/>
				  </div>
	          </form>
	          </div>
                <!-- <hr> -->
                <thead>
                  <tr>
                    <th>用户编号</th>
                    <th>用户姓名</th>
                    <th>用户密码</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>用户等级</th>
                    <th>用户状态</th>
                    <th><i class=" fa fa-edit"></i>操作</th>
                  </tr>
                </thead>
                <tbody id="userListBody">
                 
                </tbody>
              </table>
				<!-- 分页信息 -->
				<div id="showPageInfo"></div>
					<!-- 分页实现    -->
				   <div class="col-md-12 text-center"><!-- 设置居中 -->
						<ul class="pagination" id="pageItem">
							
						</ul>
				 	</div>	
            </div>
            <!-- /content-panel -->
          </div>
          <!-- /col-md-12 -->
        </div>
        <!-- /row -->
				</section>
			</section>
			<!--main content end-->
			<!--footer start-->
			<footer class="site-footer">
				<div class="text-center">
					<p>&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved</p>
					<div class="credits"> Created with Dashio template by
						<a href="https://templatemag.com/">TemplateMag</a>
					</div>
					<a href="index.jsp#" class="go-top">
						<i class="fa fa-angle-up"></i>
					</a>
				</div>
			</footer>
			<!--footer end-->
		</section>
		
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">用户修改</h4>
				</div>
				<form class="form-horizontal" role="form">
				 <div class="modal-body">
				  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">用户编号 </label>
                    <div class="col-lg-6">
                      <input class="form-control" id="userid" name="userid" type="text" readonly="readonly"/>
                    </div>
                  </div>
				  <div class="form-group">
                     	<label for="firstname" class="control-label col-lg-4">用户名</label>
                    <div class="col-lg-6">
                      <input class=" form-control" id="username" name="username" type="text"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="password" class="control-label col-lg-4">密码</label>
                    <div class="col-lg-6">
                      <input class="form-control " id="password" name="password" type="password" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">手机号</label>
                    <div class="col-lg-6">
                      <input class="form-control" id="usertel" name="usertel" type="text" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="confirm_sex" class="control-label col-lg-4">性别</label>
                    <div class="col-lg-6">
                      <select class="form-control" id="sex" name="sex">
                      	<option value="default">请选择</option>
						<option value="男">男</option>
						<option value="女">女</option>
					  </select>          
					</div>
                  </div>
                  <div class="form-group ">
                    <label for="confirm_password" class="control-label col-lg-4">等级</label>
                    <div class="col-lg-6">
                      <select class="form-control" id="userlevel" name="userlevel">
                      	<option value="default">请选择</option>
						<option value="1">普通用户</option>
						<option value="2">管理员</option>
					  </select>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="confirm_password" class="control-label col-lg-4">状态</label>
	                    <div class="col-lg-6">
	                      <select class="form-control" id="userstatus" name="userstatus">
	                      	<option value="default">请选择</option>
							<option value="0">禁用</option>
							<option value="1">启用</option>
						  </select>
	                    </div>
                  </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="updatebtn">提交更改</button>
					</div>
				 </div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
		<!-- js placed at the end of the document so the pages load faster -->
		<script src="${pageContext.request.contextPath}/lib/jquery/jquery.min.js"></script>

		<script src="${pageContext.request.contextPath}/lib/bootstrap/js/bootstrap.min.js"></script>
		<script class="include" type="text/javascript" src="../lib/jquery.dcjqaccordion.2.7.js"></script>
		<script src="${pageContext.request.contextPath}/lib/jquery.scrollTo.min.js"></script>
		<script src="${pageContext.request.contextPath}/lib/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/lib/jquery.sparkline.js"></script>
		<!--common script for all pages-->
		<script src="${pageContext.request.contextPath}/lib/common-scripts.js"></script>
		<script type="text/javascript" src="../lib/gritter/js/jquery.gritter.js"></script>
		<script type="text/javascript" src="../lib/gritter-conf.js"></script>
		<!--script for this page-->
		<script src="${pageContext.request.contextPath}/lib/sparkline-chart.js"></script>
		<script src="${pageContext.request.contextPath}/lib/zabuto_calendar.js"></script>
	</body>
<script type="text/javascript">
	//先声明一个全局遍历key
	var key="";
	$(function(){
		//进入页面发送ajax请求显示文章数据
		$.get("${pageContext.request.contextPath}/UserController",
				{
					op:"userByPage_ajax"
				},
				function(result){
					//将html拼接写成方法
					showData(result);
				},"json")
				
				//首页
				$(document).on("click",".first",function(){
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:1,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
				
				//末页
				$(document).on("click",".last",function(){
					var totalPage=$("#totalPage").text();
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:totalPage,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
				//下一页
				$(document).on("click",".next",function(){
					var pageNo=$("#PageNo").text();
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:(parseInt(pageNo))+1,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
				//上一页
				$(document).on("click",".up",function(){
					var pageNo=$("#PageNo").text();
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:(parseInt(pageNo))-1,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
				
				//指定页
				$(document).on("click",".currentPage",function(){
					var pageNo=$(this).text();
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:pageNo,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
				
				//跳转
				$(document).on("click",".trunto",function(){
					var pageNo=$("#turntoId").text();
					//获取末页值
					var totalPage=$("#totalPage").text();
					//发送ajax请求
					$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax",
							pageNo:pageNo,
							pageSize:10,
							titleLike:key
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
				})
	//搜索按钮的模糊查询
	$("#searchBtn").click(function(){
		//用户输入的模糊查询关键字
		key=$("#keyWord").val();
		//发送ajax请求  首页
		$.get("${pageContext.request.contextPath }/UserController",{op:"userByPage_ajax",pageNo:1,pageSize:3,titleLike:key},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	
	//清除按钮实现
	$("#clearBtn").click(function(){
		key="";
		$("#keyWord").val("");
	})
				
				
	})
		function showData(result){
			//首先需要清空页面数据
			$("#userListBody").empty();
			$("#showPageInfo").empty();
			$("#pageItem").empty();
			//显示文章数据列表
			$.each(result.data,function(index,user){
				var level="";
				var status="";
				if(user.u_level==1){
					level="<span class='label label-info label-mini'>普通用户</span>"
				}else{
					level="<span class='label label-warning label-mini'>管理员 </span>";
				}
				if(user.u_status==0){
					status="<span class='label label-danger label-mini'>禁用</span>";
				}else{
					status="<span class='label label-success label-mini'>启用</span>";
				}

				$("#userListBody").append("<tr>\r\n" + 
						"                    <td>"+user.u_id +"</td>\r\n" + 
						"                    <td>"+user.u_name +"</td>\r\n" + 
						"                    <td>"+user.u_password +"</td>\r\n" + 
						"                    <td>"+user.u_tel +"</td>\r\n" + 
						"                    <td>"+user.u_sex +"</td>\r\n" + 
						"                    <td>"+level+"</td>\r\n" + 
						"                    <td>"+status+"</td>\r\n" + 
						"                    <td><a href=\"\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" + 
						"									data-uid=\""+user.u_id +"\"\r\n" + 								
						"									data-uname=\""+user.u_name +"\"\r\n" + 
						"									data-upassword=\""+user.u_password +"\"\r\n" + 
						"									data-utel=\""+user.u_tel +"\"\r\n" + 
						"									data-usex=\""+user.u_sex +"\"\r\n" + 
						"									data-ulevel=\""+user.u_level +"\"\r\n" + 
						"									data-ustatus=\""+user.u_status +"\" onclick=\"showUpdateData(this)\">\r\n" + 
						"                      <button class=\"btn btn-primary btn-xs\"><i class=\"fa fa-pencil\"></i></button>\r\n</a>" + 
						"                      <a href=\"javascript:delFun("+user.u_id +") \"><button class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o \"></i></button></a>\r\n" + 
						"                    </td>\r\n" + 
						"                  </tr>")
			})
			$("#showPageInfo").append("当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+ "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");
			//首页和上一页
			if(result.pageNo==1){
				$("#pageItem").append("<li class='disabled'><a href='#'>首页</a></li><li class='disabled'><a href='#'>&laquo;</a></li>");
			}else{
				$("#pageItem").append("<li><a href='#' class='first'>首页</a></li><li><a href='#' class='up'>&laquo;</a></li>");
			}
			//分页栏
			for(var i=1;i<=result.totalPage;i++){
				if(i==result.pageNo){
					$("#pageItem").append("<li class='active'><a href='#'>"+i+"</a></li>");
				}else{
					$("#pageItem").append("<li><a href='#' class='currentPage'>"+i+"</a></li>");
				}
			}
			//下一页和末页
			if(result.pageNo==result.totalPage){
				$("#pageItem").append("<li class='disabled'><a href='#'>&raquo;</a></li><li class='disabled'><a href='#'>末页</a></li>");
			}else{
				$("#pageItem").append("<li><a href='#' class='next'>&raquo;</a></li><li><a href='#' class='last'>末页</a></li>");
			}
			//跳转页
			$("#pageItem").append("<li><a href='#' id='turntoId'><input type='number' value='"+result.pageNo+"' min='1' max='"+result.totalPage+"' style='width: 40px;height: 20px' /></a></li>");
			$("#pageItem").append("<li><a href='#' class='turnto'>跳转</a></li>");
		}
	   //在模态框显示要修改的数据
		function showUpdateData(obj) {
		    var uid = $(obj).data("uid");
			var uname = $(obj).data("uname");
			var upassword = $(obj).data("upassword");
			var utel = $(obj).data("utel");
			var usex = $(obj).data("usex");
			var ulevel = $(obj).data("ulevel");
			var ustatus = $(obj).data("ustatus");
			//显示
			$("#userid").val(uid);
			$("#username").val(uname);
			$("#password").val(upassword);
			$("#usertel").val(utel);
			$("#sex").val(usex);
			//性别不可修改
			$("#sex").attr('onClick','javascript:return false');
			$("#userlevel").val(ulevel);
			$("#userstatus").val(ustatus);
		}
	   //模态框提交修改的监听事件
	   $("#updatebtn").click(function(){
		   //创建对象存放修改后的数据
		   var user={
				    u_id:$("#userid").val(),
				    u_name:$("#username").val(),
					u_password:$("#password").val(),
					u_tel:$("#usertel").val(),
					u_sex:$("#sex").val(),
					u_level:$("#userlevel").val(),
					u_status:$("#userstatus").val(),   
		   };
		   //发送ajax修改操作
		   $.get("${pageContext.request.contextPath}/UserController",
				{
					op:"updateUser",
					user:JSON.stringify(user)
				},
				function(flag){
					if(flag){
						//关闭模态框
						$("#myModal").modal('hide');
						//刷新数据,发送ajax请求,显示当前页
						$.get("${pageContext.request.contextPath}/UserController",
							{
								op:"userByPage_ajax",
								pageNo:$("#pageNo").text(),
								pageSize:10,
								titleLike:key
							},
							function(result){
								//将html拼接写成方法
								showData(result);
							},"json")
					}else{
						alert("修改失败")
					}
				},"json")

	   })
	   function delFun(getUserId) {
			var flag = confirm("是否确认删除用户编号为:" + getUserId);
			if (flag) {
				//发送ajax请求
				$.get("${pageContext.request.contextPath}/UserController",
					{
						op:"deleteUser",
						u_id:getUserId
					},
					function(flag){
						if(flag){
							$.get("${pageContext.request.contextPath}/UserController",
									{
										op:"userByPage_ajax",
										pageNo:1,
										pageSize:10,
										titleLike:key
									},
									function(result){
										//将html拼接写成方法
										showData(result);
									},"json")
						}else{
							alert("删除失败")
						}
					},"json")
			}
		}
</script>
</html>